import React, { PureComponent } from "react";
import {
  Text,
  View,
  Image,
  TextInput,
  Alert,
  Platform,
  TouchableOpacity,
  Keyboard,
  StyleSheet
} from "react-native";
import {
  statusBarHeight,
  safeAreaBottomHeight,
  screenHeight
} from "../../util/AdapterUtil";
import NavigationService from "../../components/NavigationService";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { connect } from "react-redux";
import NavigationBar from "../../components/navigationBar";
import * as requestApi from "../../util/requestApi";

class ForgetPayScreen extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      phoneText: "",
      verificationCode: "",
      token: "",
      canClick: true,
      countTime: 60,
      isfirstSending: true,
      isCountTime: false
    };
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }
  componentDidMount() {}

  //倒计时
  _countDownAction() {
    let codeTime = this.state.countTime;
    this.interval = setInterval(() => {
      if (codeTime == 1) {
        this.setState({ countTime: 60, isCountTime: false });
        clearInterval(this.interval);
      } else {
        codeTime = codeTime - 1;
        this.setState({ countTime: codeTime, isCountTime: true });
      }
    }, 1000);
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: "#fff" }}>
        <NavigationBar
          navigation={this.props.navigation}
          isBack={true}
          title={"找回密码"}
        />
        <KeyboardAwareScrollView>
          <TouchableOpacity
            onPress={this.hiddenKeyborad.bind(this)}
            activeOpacity={1}
            style={{
              height:
                screenHeight - safeAreaBottomHeight - statusBarHeight - 44 - 10
            }}
          >
            <View
              style={{
                backgroundColor: "#fff",
                flexDirection: "row",
                height: 60,
                marginTop: 10,
                paddingLeft: 20,
                paddingRight: 15,
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <TextInput
                style={{
                  padding: 0,
                  color: "#202020",
                  fontSize: 16,
                  flex: 1,
                  height: 40,
                  alignItems: "center",
                  justifyContent: "center"
                }}
                placeholder={"请输入手机号"}
                maxLength={11}
                keyboardType={"numeric"}
                onChangeText={text =>
                  this.setState({
                    phoneText: text
                  })
                }
              />
            </View>

            <View
              style={{
                height: 1,
                backgroundColor: "#ccc",
                transform: [{ scaleY: 0.5 }]
              }}
            />

            <View
              style={{
                backgroundColor: "#fff",
                flexDirection: "row",
                height: 60,
                paddingLeft: 20,
                paddingRight: 15,
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <TextInput
                style={{
                  padding: 0,
                  color: "#202020",
                  fontSize: 16,
                  flex: 1,
                  height: 40,
                  alignItems: "center",
                  justifyContent: "center"
                }}
                placeholder={"请输入验证码"}
                keyboardType={"numeric"}
                selectionColor={"#4A90E2"}
                onChangeText={text =>
                  this.setState({
                    verificationCode: text
                  })
                }
              />
              <View
                style={{
                  width: 100,
                  height: 30,
                  alignItems: "center",
                  borderRadius: 3,
                  borderWidth: 1,
                  borderColor: "#4A90E2",
                  justifyContent: "center"
                }}
              >
                {this.state.isfirstSending ? (
                  <TouchableOpacity
                    style={{ justifyContent: "center", alignItems: "center" }}
                    onPress={this.getMessageCode.bind(this)}
                  >
                    <Text style={{ color: "#4A90E2", fontSize: 12 }}>
                      发送验证码
                    </Text>
                  </TouchableOpacity>
                ) : this.state.isCountTime ? (
                  <Text style={{ color: "#4A90E2", fontSize: 12 }}>
                    {this.state.countTime}s
                  </Text>
                ) : (
                  <TouchableOpacity
                    style={{ justifyContent: "center", alignItems: "center" }}
                    onPress={this.getMessageCode.bind(this)}
                  >
                    <Text style={{ color: "#4A90E2", fontSize: 12 }}>
                      重新发送
                    </Text>
                  </TouchableOpacity>
                )}
              </View>
            </View>

            <TouchableOpacity
              style={{
                marginTop: 30,
                marginLeft: 20,
                marginRight: 20,
                height: 45,
                borderRadius: 3,
                backgroundColor: "#3591FF",
                justifyContent: "center",
                alignItems: "center"
              }}
              onPress={this.resetPassword.bind(this)}
              disabled={!this.state.canClick}
            >
              <Text style={{ color: "#fff", fontSize: 14 }}>下一步</Text>
            </TouchableOpacity>
          </TouchableOpacity>
        </KeyboardAwareScrollView>
        <View style={{ height: safeAreaBottomHeight }} />
      </View>
    );
  }

  hiddenKeyborad() {
    Keyboard.dismiss();
  }

  getMessageCode() {
    let { phoneText } = this.state;
    let params = { phone: phoneText };
    if (
      typeof phoneText == "undefined" ||
      phoneText == null ||
      phoneText == ""
    ) {
      Toast.show("请输入手机号", 1000);
      return;
    }
    if (this.isPhoneNumber(phoneText)) {
      requestApi
        .getPayPasswordVCode(params)
        .then(res => {
          Toast.show("发送成功", 1000);
          this._countDownAction(); //开始计时
          this.setState({ isfirstSending: false, countTime: 60 }); //第一次发送按钮
        })
        .catch(err => {
          Toast.show("发送失败:" + err.msg, 1000);
        });
    } else {
      Toast.show("手机号格式不对", 1000);
    }
  }

  resetPassword() {

    let { phoneText, verificationCode } = this.state;
    let params = { phone: phoneText, verificationCore: verificationCode };
    if (
      typeof phoneText == "undefined" ||
      phoneText == null ||
      phoneText == ""
    ) {
      Toast.show("请输入手机号", 1000);
      return;
    }
    if (
      typeof verificationCode == "undefined" ||
      verificationCode == null ||
      verificationCode == ""
    ) {
      Toast.show("请输入验证码", 1000);
      return;
    }
    if (this.isPhoneNumber(phoneText)) {
      requestApi
        .verificationPayVCode(params)
        .then(res => {
          clearInterval(this.interval);
          Toast.show("验证成功", 1000);
          NavigationService.navigate("ResetPayPassword", {
            istohome: true,
            vCode: verificationCode,
            phone: phoneText
          });
        })
        .catch(err => {
          Toast.show("验证失败", 1000);
        });
    } else {
      Toast.show("手机号格式不对", 1000);
    }
  }

  isPhoneNumber = phoneNumber => {
    const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    return reg.test(phoneNumber);
  };
}

const styles = StyleSheet.create({
  loginTitle: {
    marginLeft: 15,
    marginTop: 25,
    color: "#202020",
    fontSize: 30,
    fontWeight: "bold"
  }
});

export default connect(
  ({ userInfo }) => ({
    userInfo
  }),
  {}
)(ForgetPayScreen);
